<template>
  <div class="incomeTracking">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">考核办法</div>
      </div>
    </div>
    <div class="content" style="margin-top:3px">
      <div class="fenqy">
        <div class="operation">
          <el-form :inline="true" :model="form" label-width="80px" class="formList">
            <el-form-item label="年份">
              <el-select v-model="form.year">
                <el-option
                  v-for="item in yearOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账期">
              <el-select v-model="form.month">
                <el-option
                  v-for="item in monthOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" @click="submitHandle">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div style="border-bottom:1px solid #EBEEF5;" class="tableBox">
          <el-table
            border
            stripe
            v-loading="tableLoading"
            :data="tableData"
            style="width: 100%"
            class="tableTh28"
            height="65vh"
            ref="table"
            :span-method="arraySpanMethod"
          >
            <!--    :span-method="arraySpanMethod"     -->
            <el-table-column label="类别" prop="className" width="50"></el-table-column>
            <el-table-column label="项目"  prop="indexName" min-width="90"></el-table-column>
            <el-table-column
              label="权重"
              prop="weight"
              width="50"
            ></el-table-column>
            <el-table-column label="单位" prop="subIndexName" width="100"></el-table-column>
            <!--    label="主营业务收入" -->
            <el-table-column label="计分规则"  prop="checkRules" min-width="180px"></el-table-column>
            <el-table-column label="责任部门" prop="deptName" width="80px"></el-table-column>
            <el-table-column label="供稿人员" prop="dutyUserName" width="80px"></el-table-column>
            <el-table-column label="数据来源" prop="dataSource" width="160"></el-table-column>
            <el-table-column label="取数口径说明"  prop="sexplain" min-width="120"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSessionStorage } from "@/common/js/storage";
import { getCookie, setCookie } from "@/common/js/cookie";
import { mergeSpan } from "@/utils/mixin.js";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
export default {
  name: "assessment",
  data() {
    return {
      form: {
        areaId: "",
        year: "",
        month: "",
        startDate: "",
        endDate: "",
      },
      accountInfo: "",
      tableLoading: false,
      tableData: [],
      count: "",
      titleList: [],
      head: "",
      yearOptions: [],
      monthOptions: [
        {
          value: "Q1",
          label: "一季度",
        },
        {
          value: "Q2",
          label: "二季度",
        },
        {
          value: "Q3",
          label: "三季度",
        },
        {
          value: "Q4",
          label: "四季度",
        },
      ],
    };
  },
  created() {
    this.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.getMarketMonth();
    },
    getMarketMonth() {
      let that = this;
      $budgetAPI.ruleMonth(
        {},
        (res) => {
          if (res || res.code == 0) {
            console.log(res);
            res.content.years.map((it, i) => {
              that.yearOptions[i] = 
                {
                  value: it,
                  label: it,
                }
            });
            // that.yearOptions = res.content.years;
            that.form.year = res.content.maxMonth.substr(0, 4);
            that.form.month = res.content.maxMonth.substr(4);
            // that.monthOptions.length = res.content.maxMonth.substr(5);
            that.getData(that.form.year, that.form.month);
          }
        },
        (err) => {}
      );
    },
    submitHandle() {
      let year = this.form.year;
      let month = this.form.month
        ? this.form.month
        : this.formatDate(new Date());
      this.getData(year, month);
    },
    getData(year, month) {
      let that = this;
      this.tableLoading = true;

      $budgetAPI.ruleIntro(
        {
          acctMonth: year + month,
        },
        (res) => {
          this.tableLoading = false;
          if (res.code === 0) {
            console.log("res.content", res.content);
            let content = res.content;
            that.spanArr = that.mergeSpan2(res.content, ["className"]);
            that.tableData = content;
          } else {
            this.alertError(res);
          }
          this.$nextTick(() => {
            this.$refs.table.doLayout();
          });
        },
        (err) => {
          this.tableLoading = false;
        }
      );
    },
    mergeSpan2(tableData, arr) {
      let spanArr = new Array(tableData.length);
      for (let m = 0; m < spanArr.length; m++) {
        spanArr[m] = new Array(arr.length);
      }
      arr.forEach((ele, ind) => {
        let pos = null;
        tableData.forEach((item, index, self) => {
          if (index == 0) {
            spanArr[index][ind] = {
              rowspan: 1,
              colspan: 1,
            };
            pos = 0;
          } else {
            if (item[ele] === self[index - 1][ele]) {
              spanArr[pos][ind].rowspan += 1;
              spanArr[index][ind] = {
                rowspan: 0,
                colspan: 0,
              };
            } else {
              pos = index;
              spanArr[index][ind] = {
                rowspan: 1,
                colspan: 1,
              };
            }
          }
        });
      });
      return spanArr;
    },
    //获取当前时间
    formatDate: function (value) {
      let date = new Date(value);
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y;
    },
    //区域选择 返回ID和name
    areaChange(event) {
      let temp = this.areaList.find((item) => {
        return (item.areaId = event);
      });
      this.form.areaName = temp.areaName;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
  },
};
</script>

<style lang="scss">
.export {
  width: 27%;
  text-align: right;
}
/deep/ .el-table .cell {
  text-align: center;
}
</style>
